<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border:1px solid #333
        }
    </style>
</head>

<body>
    <div id="app">
        <p>自定义指令添加参数</p>
        <!-- <p v-xyh:t.c="e">123</p> -->
        <p v-xyh:t="c">666</p>
        <p v-xyh:t.bold="c">加粗</p>
        <p v-xyh:t.italic="c">倾斜</p>
        <p v-xyh:e="f">边框</p>
        <p v-xyh:g="f">边框</p>
        <br>
        ------------------
        <p>总价: <span v-price="'50px'">100.00</span></p>



    </div>
    <script src="./vue.global.js"></script>
    <script>
        /* 
        v-cloak
        v-if="数据"
        v-bind:hello="数据"
        v-on:click.prevent="数据"
        指令名称:参数.修饰符="值"
        指令名称  必须有 
        参数 选填
        修饰符  选填
        值  选填 

        在每个生命周期(钩子)有四个参数 
        分别是 el 元素  binding 记录你使用这个指令 给出的所有的信息 
        arg  指定的参数在这里边  
        modifiers 修饰符
        value  值    注意这个值 是属性对应的值  data 或者computed要存在这个属性 
        否则 value 是undefined 

        oldValue 指令修改之前的值  (更新以后的生命周期会用到这个)

        */


        /* 
        t 表示文本  
        e 表示边框 
        c 表示背景 
        
        
        */
        const { createApp } = Vue;

        const app = createApp({
            data() {
                return {
                    c:'orange',
                    f:'red'
                }
            },
            directives: {
                xyh:{
                    mounted(el,bingding){
                        console.log('挂载以后');
                        console.log(bingding)
                        // 说明你没有传递任何参数
                        if(!bingding.arg) return;

                        switch(bingding.arg){
                            case 't':
                                el.style.color = bingding.value
                                if(bingding.modifiers.bold) el.style.fontWeight='bold'
                                if(bingding.modifiers.italic) el.style.fontStyle='italic'
                                break
                            case 'e':
                                el.style['border-color'] = bingding.value
                                break
                            case 'g':
                                el.style.backgroundColor = bingding.value
            
                        }

                    }
                },
                price:{
                    mounted(el,binding){
                        el.style.fontWeight= 'bold'
                        el.style.color= 'red'
                        el.style.fontSize= binding.value || 1.5


                    }
                }
            }
        });
        app.mount('#app')
    </script>
</body>

</html>